<template>
  <div class="article_wrap">
    <van-nav-bar
      title="文章详情"
      left-arrow
      @click-left="$router.back()"
      class="nav_bar"
    />
    <!-- <h5 class="title">
      我是测试title我是测试title我是测试title我是测试title我是测试title我是测试title我是测试title
    </h5> -->
    <div class="article_info">
      <h5 class="title">{{ article.title }}</h5>
      <van-cell center class="user_info">
        <div slot="title" class="user_title">{{ article.aut_name }}</div>
        <van-image
          slot="icon"
          round
          fit="cover"
          :src="article.aut_photo"
          class="user_img"
        />
        <div slot="label" class="user_time">
          {{ article.pubdate | relativeTime }}
        </div>
        <van-button
          type="info"
          round
          size="small"
          class="user_btn"
          :icon="article.is_followed ? '' : 'plus'"
          :loading="loadingBtn"
          @click="onFollowed"
          >{{ article.is_followed ? "已关注" : "关注" }}</van-button
        >
      </van-cell>
      <!-- 文章 内容-->
      <div class="content" v-html="article.content" ref="articleContent"></div>
      <!-- 评论组件 -->
      <comment-list :source="art_id"></comment-list>
    </div>
    <!-- 底部工具栏-->
    <div class="article_comments">
      <van-button class="comments_btn">写评论</van-button>
      <div class="comments_icon">
        <van-icon name="comment-o" class="icon" />
        <van-icon
          :name="article.is_collected ? 'star' : 'star-o'"
          :loading="loadingCollection"
          @click="onCollectedClick"
          class="icon"
        /><van-icon
          :name="article.attitude === 1 ? 'good-job' : 'good-job-o'"
          @click="onAttitudeClick"
          class="icon"
        />
        <van-icon name="share-o" class="icon" />
      </div>
    </div>
  </div>
</template>

<script>
import {
  getArticleById,
  addUserFollowings,
  deteleUserFollowings,
  addCollections,
  deleteCollection,
  addLikings,
  deleteLikings
} from "@/request/home";
import { ImagePreview } from "vant";
import { Toast } from "vant";
import day from "@/utils/day";
import commentList from "./components/commentList";

export default {
  data() {
    return {
      art_id: null,
      article: {},
      loadingBtn: false,
      loadingCollection: false
    };
  },
  components: {
    commentList
  },
  created() {
    this.art_id = this.$route.params.articleId;
    if (this.art_id) this._getArticleById(this.art_id);
  },
  methods: {
    async _getArticleById(id) {
      const { data } = await getArticleById(id);
      this.article = data.data;
      // console.log(this.article);

      this.$nextTick(() => {
        this.handlePerviewImages();
      });
    },
    handlePerviewImages() {
      const articleContent = this.$refs["articleContent"];
      const imgs = articleContent.querySelectorAll("img");
      const imgsPath = [];
      imgs.forEach((img, index) => {
        imgsPath.push(img.src);
        img.onclick = function() {
          ImagePreview({
            images: imgsPath,
            startPosition: index
          });
        };
      });
    },
    // 关注 / 已关注
    async onFollowed() {
      this.loadingBtn = true;
      if (this.article.is_followed) {
        // 取消关注
        await deteleUserFollowings(this.article.aut_id);
      } else {
        // 关注
        await addUserFollowings(this.article.aut_id);
      }
      this.article.is_followed = !this.article.is_followed;
      this.loadingBtn = false;
    },
    // 收藏 取消收藏
    async onCollectedClick() {
      this.loadingCollection = true;
      if (this.article.is_collected) {
        // 取消收藏
        await addCollections(this.article.art_id);
      } else {
        // 收藏
        await deleteCollection(this.article.art_id);
      }
      this.loadingCollection = false;
      this.article.is_collected = !this.article.is_collected;
      Toast.success(`${this.article.is_collected ? "" : "取消"}收藏成功`);
    },
    // 点赞 取消点赞
    async onAttitudeClick() {
      if (this.article.attitude !== 1) {
        // 点赞
        await addLikings(this.art_id);
        this.article.attitude = 1;
      } else {
        // 取消点赞
        await deleteLikings(this.art_id);
        this.article.attitude = -1;
      }
      Toast.success(`${this.article.attitude === 1 ? "" : "取消"}点赞成功`);
    }
  }
};
</script>

<style lang="less" scoped>
.article_wrap {
  .article_info {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 44px;
    overflow-y: auto;
  }
  .nav_bar::after {
    border: none;
  }
  /deep/.van-nav-bar__content {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #3296fb;
    .van-nav-bar__title {
      color: white;
      border: none;
      font-size: 15px;
    }
    .van-nav-bar__arrow {
      color: white;
    }
  }
  .title {
    // width: 90%;
    // background-color: aqua;
    margin: 0 auto;
    margin: 20px 20px;
    padding-top: 50px;
    word-break: break-all;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .user_info {
    .user_img {
      width: 45px;
      height: 45px;
    }
    .user_title {
      margin-left: 8px;
    }
    .user_time {
      margin-left: 8px;
    }
    .user_btn {
      width: 65px;
      height: 30px;
    }
  }

  .content {
    font-size: 15px;
    margin: 0 10px 0 10px;
    // .img {
    //   width: 100px;
    //   height: 100px ;
    // }
  }
  .article_comments {
    display: flex;
    flex-wrap: nowrap;
    position: fixed;
    width: 100%;
    height: 45px;
    left: 0;
    right: 0;
    bottom: 0;
    line-height: 45px;
    background-color: #fbfbfb;
    .comments_btn {
      flex: 1;
      height: 35px;
      margin: 5px 0 5px 5px;
    }
    .comments_icon {
      flex: 1;
      display: flex;
      margin-left: 15px;
      font-size: 22px;
      .icon {
        width: 20px;
        line-height: 45px;
        align-items: center;
        flex: 1;
      }
      .van-icon::before {
        color: #a09c98;
      }
    }
  }
}
</style>